<template>
<ProductItem :list="goodsList"></ProductItem>
</template>
<script setup>
import ProductItem from './ProductItem.vue';
let goodsList=[{id:"a1",name:"苹果",price:10},{id:"a2",name:"香蕉",price:3},{id:"a3",name:"雪糕",price:5},{id:"a4",name:"轮胎",price:210},
{id:"a5",name:"石砖",price:24},{id:"a6",name:"自行车",price:160},{id:"a7",name:"床",price:80},{id:"a8",name:"炸弹",price:666},{id:"a9",name:"井盖",price:111}]
</script>
<style scoped></style>
练习题 1：商品列表与详情（父传子基础）
需求：
- 父组件 ProductList 中维护一个商品列表数组（包含 id、name、price、image 字段）。
- 子组件 ProductItem 负责渲染单个商品的卡片（显示图片、名称、价格）。
- 父组件通过循环将每个商品的数据传递给子组件，实现商品列表展示。
要求：
1.父组件使用 v-for 循环渲染 ProductItem，并通过 props 传递商品数据。
2.子组件需定义 props 类型（使用 defineProps），并指定必填项和数据类型。
3.当商品价格大于 100 元时，子组件中价格文字显示为红色；否则为黑色。
提示：
- 子组件 props 可定义为：{ id: Number, name: String, price: Number, image: String }
- 价格样式可通过动态 :class 控制。